随着 webpack 越发复杂臃肿，Parcel 横空出世。

作为一个有追求的程序员，怎能不尝尝鲜呢？

初始化

1
2
3

npm init
npm install --save vue
npm install --save-dev parcel-bundler

转换

许多打包工具比如 webpack 需要用户安装和配置插件来转换资源，Parcel 支持许多开箱即用的转换器和内置的编译器。

Parcel 会在模块中找到配置文件 (例如 .babelrc ，.postcssrc) 时会自动运行并进行转换。

Babel

这一步可省略：

1

npm install babel-preset-env --save-dev

根目录配置 .babelrc ：

1
2
3

{
    "presets": ["env"]
}

PostCSS

PostCSS 是一个使用插件转换 CSS 的工具，例如 autoprefixer，cssnext 以及 CSS Modules 。你可以使用这些名称之一创建配置，从而达到使用 Parcel 配置 PostCSS 的目的： .postcssrc (JSON)，.postcssrc.js，或 postcss.config.js

这一步可省略：

1

npm install postcss-modules autoprefixer --save-dev

创建一个 .postcssrc 文件：

1
2
3
4
5
6
7
8

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

“modules”: true 首页的样式会失效

配置 package.json

1
2
3
4
5
6

"scripts": {
    "start": "npm run dev",
    "dev": "parcel index.html -p 2333 --open",
    "build": "parcel build index.html --public-url ./ --no-cache",
    "test": "echo \"Error: no test specified\" && exit 1"
},

• -p 2333 设置端口号为 2333
• –open 自动打开浏览器
• –public-url ./ 设置要提供服务的公共 URL(./ 也就是设置为当前 dist 目录下)
• –no-cache 禁用文件系统缓存

配置 .gitignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.DS_Store
.cache
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

开始使用

开发调试

1

npm run dev

正式构建

1

npm run build